<template>
    <div>
      <button v-if="!isExpanded" @click="expand" :disabled="isAnimating">展开</button>
      <button v-if="isExpanded" @click="collapse" :disabled="isAnimating">收起</button>
      <transition-group tag="ul" name="list">
        <li v-for="(item, index) in items" :key="index" v-show="isExpanded">{{ item }}</li>
      </transition-group>
    </div>
  </template>
  
  <script setup>
import { ref } from 'vue';

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
const isExpanded = ref(false);
const isAnimating = ref(false);

const expand = () => {
  if (isAnimating.value) {
    return;
  }

  isAnimating.value = true;
  isExpanded.value = true;

  setTimeout(() => {
    isAnimating.value = false;
  }, 500);
};

const collapse = () => {
  if (isAnimating.value) {
    return;
  }

  isAnimating.value = true;
  isExpanded.value = false;

  setTimeout(() => {
    isAnimating.value = false;
  }, 500);
};
</script>

<style lang="scss" scoped>
.list-enter-from {
    opacity: 0;
    transform: translateY(0px);
}
.list-leave-active {
  transition: all 0.5s ease-in-out;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>